<template>
	<view class="content">
		<view class="top">
			<view class="shadow">
			</view>
			<view class="top-main">
				<!-- <view style="width: 92rpx;height: 64rpx;"></view> -->
				<image style="width: 64rpx;height: 64rpx;" src="../../static/back.png"></image>
				<view>登录学习3/1</view>
				<view>客服</view>
			</view>
		</view>
		
		<!-- 步骤 -->
		<view class="step">
			<view class="step-top">
				<!-- 圆圈 -->
				<view class="circleOver">
					<view>
						<text>1</text>
					</view>
				</view>
				<image style="width: 79rpx;height: 11rpx;" src="../../static/Vector.png"></image>
				<view class="circleNone">
					<view>
						<text>2</text>
					</view>
				</view>
				<image style="width: 79rpx;height: 11rpx;" src="../../static/Vector.png"></image>
				<view class="circleNone">
					<view>
						<text>3</text>
					</view>
				</view>
			</view>
			<view class="step-bottom">
				<view class="step-bottom-over">
					<text>step1</text>
					<text>完成</text>
				</view>
				<view class="step-bottom-none">
					<text>step2</text>
					<text>未开始</text>
				</view>
				<view class="step-bottom-none">
					<text>step3</text>
					<text>未开始</text>
				</view>
			</view>
		</view>
		
		<video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" style="width: 90%;height: 386rpx;"></video>
		
		<text class="endTip">点击观看视频，先简单学习了解如何交易</text>
		<!-- end -->
		<view class="end-second">
			<text>下一步</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				midList:['账号注册','电话号码','电子邮箱'],
				selected:0
			}
		},
		onLoad() {

		},
		methods: {
			midTap(e){
				this.selected=e;
			}
		}
	}
</script>

<style>
	page{
		background: var(--color-fill-bg-light, #0C0C0C);
	}
	.top-main>view:nth-child(3){
		color: #FFC549;width: 92rpx;height: 64rpx;text-align: center;line-height: 64rpx;background: var(--color-fill-bg-grey, #1D1C21);
		border-radius: 32rpx;font-size: 30rpx;
	}
	.top-main>view:nth-child(2){
		color: white;font-size: 36rpx;
	}
	.top-main{
		width: 100%;;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 88rpx;height: 88rpx;
	}
	.shadow{
		width: 540rpx;height: 516rpx;background: radial-gradient(82.96% 86.82% at 32.96% 0%, #FFC549 0%, rgba(153, 118, 44, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
		position: absolute;top: -258rpx;left: -270rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.top{
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.tab-selected{
		color: #FFC549;
	}
	.tab-unselect{
		color: #FFFFFF80;
	}
	.tab-end-selected{
		background-color: #FFC549;width: 32rpx;height: 4rpx;
	}
	.tab-end-unselect{
		background: none;
	}
	.end-second{
		width: 90%;
		height: 104rpx;
		background-color: #FFC549;
		border-radius: 24rpx;
		line-height: 104rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #000;
		margin: auto;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}
	.reg-main{
		width: 90%;border: 1rpx solid var(--color-fill-bg-input, #FFFFFF1A);background: #FFFFFF1A;margin-top: 20rpx;
		display: flex;flex-direction: row;align-items: center;justify-content: space-between;height: 112rpx;border-radius: 24rpx;
	}
	.reg-main-left{
		display: flex;flex-direction: row;align-items: center;
	}
	.reg-main-left-img{
		width: 40rpx;height: 40rpx;margin-left: 20rpx;
	}
	.reg-main-left-input{
		color: white;font-size: 28rpx;width: 65%;margin-left: 20rpx;
	}
	.reg-main-right-img{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.reg-main-right{
		width: 40rpx;height: 40rpx;margin-right: 15rpx;
	}
	.reg-main-left>text:first-child{
		color: #FFC549;font-size: 28rpx;margin-left: 20rpx;
	}
	.reg-main-left>text:nth-child(2){
		color: #FFFFFFCC;font-size: 28rpx;
	}
	.s-title{
		font-size: 28rpx;
		color: white;
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;
		margin-bottom: 8rpx;
	}
	.addPic{
		width: 90%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15rpx;
	}
	.add{
		width: 208rpx;
		height: 208rpx;
		background: var(--color-fill-bg-input, #FFFFFF1A);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 25rpx;
		position: relative;
		/* justify-content: space-around; */
	}
	.add>text:first-child{
		font-size: 80rpx;
		font-weight: 400;
		color: white;
		margin: 5rpx 0;
	}
	.add>text:nth-child(2){
		font-size: 28rpx;
		color: white;
	}
	.deletePic{
		position: absolute;top: 0;right: 0;width: 40rpx;height: 40rpx;background-color: #FFC549;color: black;font-size: 24rpx;text-align: center;line-height: 40rpx;border-top-right-radius: 24rpx;border-bottom-left-radius: 24rpx;
	}
	.end-second{
		width: 90%;
		height: 104rpx;
		background-color: #FFC549;
		border-radius: 24rpx;
		line-height: 104rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #000;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}
	.endTip{
		font-size: 28rpx;
		color: white;
		margin-top: 50rpx;
		margin-bottom: 20rpx;
	}
	.step{
		width: 90%;
		margin-bottom: 46rpx;
		display: flex;
		flex-direction: column;
	}
	.step-bottom{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 8rpx;
	}
	.step-bottom-none>text{
		font-size: 24rpx;
		color: #FFFFFFCC;
		line-height: 38rpx;
	}
	.step-bottom-over,.step-bottom-none{
		width: 88rpx;display: flex;
		flex-direction: column;
		align-items: center;
	}
	.step-bottom-over>text{
		font-size: 24rpx;
		color: #FFC549;
		line-height: 38rpx;
	}
	.step-top{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.circleOver{
		width: 88rpx;height: 88rpx;background-color: #FFC549;border-radius: 50%;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
	}
	.circleOver>view{
		border: 4rpx solid #000000;width: 32rpx;height: 32rpx;text-align: center;line-height: 24rpx;border-radius: 50%;
	}
	.circleOver>view>text{
		font-weight: 600;font-size: 24rpx;color: #000000;
	}
	.circleNone{
		width: 88rpx;height: 88rpx;background: var(--color-fill-bg-input, #FFFFFF1A);border-radius: 50%;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
	}
	.circleNone>view{
		border: 4rpx solid #FFFFFF;width: 32rpx;height: 32rpx;text-align: center;line-height: 24rpx;border-radius: 50%;
	}
	.circleNone>view>text{
		font-weight: 600;font-size: 24rpx;color: #FFFFFF;
	}
</style>
